<style>
    @media screen and (max-width: 500px) {
        
        .layui-layer.layui-layer-page {
            width: 100% !important;
            overflow-x: scroll !important;
            left: 0 !important;
        }

        .layui-layer-title {
            width: 100% !important;
            box-sizing: border-box;
        }

        .layui-layer-content {
            width: 100% !important;
        }
    }
</style>
<form class="layui-form seller-form"  action="" >
    <div class="layui-form-item">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit  lay-filter="operation-add"><i class="layui-icon">&#xe608;</i>添加</button>
            <button class="layui-btn layui-btn-sm" lay-submit  lay-filter="auth"><i class="layui-icon">&#xe608;</i>生成权限</button>
        </div>
    </div>
</form>

<div class="table-body">
    <span class="layui-breadcrumb" style="margin-bottom:0;padding-bottom:0;" id="parent_url">

</span>
    <table id="operationTable" lay-filter="operation"></table>
</div>

<script src="__STATIC_JS__jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script>
    var pid = 1;
    layui.use(['form', 'layedit', 'laydate','table'], function(){
        var userTables =layui.table.render({
            elem: '#operationTable',
            height: 'full-150',
            cellMinWidth: '80',
            page: false,
            limit:'2000',
            url: "{:url('Operation/index')}?_ajax=1",
            id:'operationTable',
            cols: [[
                {type:'numbers'},
                {field:'code', width:160, title:'编码'},
                { title:'名称', width:160,templet:function(data){
                    var html = '';
                    if(data.type != '方法'){
                        html += '<a class="link-hot option-show" data-id="' + data.id + '">'+data.name+'</a>';
                    }else{
                        html += data.name;
                    }

                    return html;
                }},
                {field:'type', width:160,title:'类型'},
                {field:'parent_menu_name', width:160,title:'父菜单'},
                {field:'perm_type', width:160,title:'许可类型'},
                {field:'sort', width:160,title:'排序'},
                {field: 'operating', width:160, title: '操作', align: 'center',templet:function(data){
                    var html = '';
                    html += '<a  class="layui-btn layui-btn-xs option-edit" data-id="' + data.id + '">编辑</a>';
                    html += '<a  class="layui-btn layui-btn-xs option-del layui-btn-danger" data-id="' + data.id + '">删除</a>';
                    return html;
                }},
            ]],
            done: function(res, curr, count){
                $("#parent_url").empty();
                $("#parent_url").append('<a href="javascript:;" class="option-show" data-id="1" >根节点</a>');
                $.each( res.parents, function(i, n){
                    $("#parent_url").append('<span lay-separator="">/</span><a  href="javascript:;" class="option-show" data-id="' + n.id + '" >'+ n.name+'</a>');
                    pid = n.id;
                });
            }
        });
        
        //监听添加  (add)
        layui.form.on('submit(operation-add)',function(data){
            var topLayui = parent === self ? parent.window.layui : top.parent.window.layui;
            topLayui.index.openTabsPage('{:url("Operation/add")}', '节点添加'); 
            return false; 
        });

        //监听添加  (add)
        layui.form.on('submit(auth)',function(data){
            var topLayui = parent === self ? parent.window.layui : top.parent.window.layui;
            topLayui.index.openTabsPage('{:url("Operation/auth")}', '生成权限'); 
            return false; 
        });

        //点击跳转到对应菜单
        $(document).on('click','.option-show',function(){
            var id = $(this).attr('data-id');
            layui.table.reload('operationTable', {
                where: {parent_id:id}
            });
        });

        //角色删除
        $(document).on('click','.option-del',function(){
            var id = $(this).attr('data-id');
            layer.confirm('您确定删除此节点吗？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                //去删除
                JsPost("{:url('Operation/del')}",{'id':id},function(res){
                    if(res.status){
                        layer.msg('删除成功');
                        layui.table.reload('operationTable', {
                            where: {parent_id:pid}
                        });
                    }else{
                        layer.msg(res.msg);
                    }

                });
            }, function(){
                layer.close(1);
            });
        });

        //编辑
        $(document).on('click','.option-edit',function(){
            var id = $(this).attr('data-id');

            var user_id = $(this).attr('data-id');
            var url = "{:url('manage/Operation/edit')}" + '?id=' + id;
            var topLayui = parent === self ? parent.window.layui : top.parent.window.layui;
            topLayui.index.openTabsPage(url, '节点编辑'); 
            return false;
        });
    });
</script>
